import { Skeleton, Table } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useRequest } from "ahooks";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { AtPagination, AtSearchBar } from "taro-ui";
import FormCalendar from "../../../components/FormCalendar";
import { getDevelopUserDataApi } from "../../../servers/servers";
import { Copy } from "@nutui/icons-react-taro";
import Taro from "@tarojs/taro";

const Pipeline = () => {
  const columns1 = [
    {
      title: "用户号码",
      key: "mobile",
      fixed: "left",
      width: 120,
      render: (_record, index) => {
        return (
          <div
            onClick={() => {
              Taro.setClipboardData({
                data: _record?.mobile,
                success: function (res) {
                  Taro.getClipboardData({
                    success: function (res) {
                      console.log(res.data); // data
                    },
                  });
                },
                fail: function (res) {
                  console.log("res", res.errMsg);
                },
              });
            }}
          >
            {_record?.mobile}{" "}
          </div>
        );
      },
    },
    {
      title: "用户姓名",
      key: "name",
      width: 60,
      render: (_record, index) => {
        return "*" + _record?.name?.slice(1);
      },
      // fixed: 'left',
    },

    // {
    //   title: '组织编码',
    //   key: 'organization_code',
    // },
    {
      title: "套餐类型",
      key: "package_type",
      width: 60,
    },
    {
      title: "有效天数",
      key: "effective_days",
      width: 60,
    },
    {
      title: "订单金额",
      key: "order_money",
      width: 60,
    },
    {
      title: "创建时间",
      key: "creation_time",
      render: (_record, index) => {
        return dayjs(_record?.creation_time).format("YYYY-MM-DD");
      },
      width: 100,
    },
    {
      title: "奖励金额",
      key: "reward_amount",
      width: 100,
    },
  ];

  const [currentPage, setcurrentPage] = useState(1);

  const [total, setTotal] = useState(0);

  const { data, run, loading } = useRequest(
    async ({ page, ...ret }) => {
      const _params = {};
      if (ret?.mobile) {
        _params.mobile = ret.mobile;
      }
      if (startDate && endDate) {
        _params.creation_time__range = [startDate, endDate];
      }
      const { data } = await getDevelopUserDataApi({
        page,
        filters: JSON.stringify({
          ..._params,
        }),
      });

      setTotal(data?.count);
      return data;
    },
    {
      manual: true,
    }
  );

  // 要搜索的手机号
  const [searchPhone, setSearchPhone] = useState("");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  useEffect(() => {
    run({
      page: currentPage,
      mobile: searchPhone ?? undefined,
      start_date: startDate,
      end_date: endDate,
    });
  }, [currentPage, searchPhone, startDate, endDate]);

  const [searchValue, setSearchValue] = useState("");
  return (
    <>
      <View
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <View
          style={{
            flex: 1,
          }}
        >
          <AtSearchBar
            showActionButton
            value={searchValue}
            onChange={(val) => {
              setSearchValue(val);
            }}
            onConfirm={(e) => {
              setSearchPhone(e?.target?.value);
            }}
            onActionClick={() => {
              setSearchPhone(searchValue);
            }}
            placeholder="请输入手机号"
            inputType="number"
          />
        </View>
        <FormCalendar
          title="发展日期选择"
          onConfirm={(values) => {
            setStartDate(dayjs(values?.[0]).format("YYYY-MM-DD HH:mm:ss"));
            setEndDate(
              dayjs(values?.[1])
                .add(23, "hour")
                .add(59, "minute")
                .add(59, "second")
                .format("YYYY-MM-DD HH:mm:ss")
            );
          }}
        />
      </View>

      {loading ? (
        <Skeleton rows={8} title animated />
      ) : (
        <Table
          bordered
          striped
          columns={columns1}
          data={data?.list}
          // summary={<>共 {total} 条数据</>}
        />
      )}

      <View
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: 12,
          marginBottom: 12,
        }}
      >
        共 {total} 条数据
      </View>
      <AtPagination
        style={{
          marginTop: 12,
        }}
        total={data?.count}
        pageSize={15}
        current={currentPage}
        onPageChange={(page) => {
          setcurrentPage(page?.current);
        }}
      ></AtPagination>
    </>
  );
};
export default Pipeline;
